<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>作业</title>

    <style>
      #specs {
        user-select: none;
      }
      #specs > span {
        padding: 5px;
        border-radius: 3px;
        border: 2px solid #111;
        color: #111;
        display: inline-block;
        margin: 4px;
      }

      #specs > span.cur {
        border-color: green;
        color: green;
      }
    </style>
  </head>
  <body>
    <div id="specs">
      <span class="cur">双核 i5/8GB内存/128GB闪存</span>
      <span>双核 i5/8GB内存/256GB闪存</span>
      <span>双核 i7/8GB内存/128GB闪存</span>
      <span>双核 i7/8GB内存/256GB闪存</span>
    </div>

    <script>
      // #specs>span   预判:查询结果是多个,  用带 all
      const spans = document.querySelectorAll('#specs>span')
      console.log(spans)
      // 遍历, 为每一项添加事件
      // 之前用for..of遍历, 是因为伪数组不能用forEach
      spans.forEach((value, index, array) => {
        // 可利用 箭头函数语法糖进行简化
        // 详细参考: JS高级的  高阶函数 部分
        value.onclick = function () {
          // 选出 唯一的那个 带 cur 样式的
          const cur = document.querySelector('#specs>.cur')
          console.log(cur)
          cur.classList.remove('cur')
          this.classList.add('cur')
        }
      })
    </script>
  </body>
</html>
